<template>
  <div style="background-image: url('../../assets/img/bk7.jpg')">
<el-row style="height: 528px;">
  <el-col  :span="7" :offset="2">
          <div style="margin-top: 50px;">
            <img :src="picUrl" class="img">
          </div>
    </el-col>

    <el-col  :span="12"  :offset="2" >
      <div class="title" >
         <p style="font-size: 20px">{{songsStore.songname}}</p>
         <p>歌手:{{songsStore.singer}}</p>
         <p>专辑:{{songsStore.al}}</p>
      </div>
<div class="geci">
      <div class="lrcbox" ref="lrc2">
       <p v-for="(item,key,i) in lyric" :key="i" :class="key==rightTime ? 'active' :'' ">
       {{item}}
     </p>
  </div>
</div>
    </el-col>
</el-row>
</div>
</template>

<script setup>
import $ from 'jquery';
import {ref, watch} from "vue";
import { onMounted } from 'vue'
import {useSongsStore} from "@/Store/Pinia/pinia"
const songsStore =useSongsStore();
const picUrl=ref(songsStore.picUrl)
const songname=ref(songsStore.songname)
const singer=ref(songsStore.singer)
const al=ref(songsStore.al)
const lrc0=ref(songsStore.lrc)


const lyric=ref('');
const rightTime=ref('');
const offset=ref(30);
const  lrc=ref('');
const  lrc2=ref('');
getLrc();

const subscribe1 = songsStore.$subscribe(
    (mutation, state) => {
      // console.log(mutation)
      picUrl.value = state.picUrl;
       songname.value=state.songname;
       singer.value=state.singer;
       al.value=state.al;
       lrc0.value=state.lrc;
       getLrc();

    },
    { detached: false }
)

     function getLrc(){
     lrc.value=lrc0.value;      //处理歌词时间
     let obj={};
      let reg=/\[(.*?)](.*)/g;
      lrc.value.replace(reg,(a,b,c)=>{
        b=b.slice(0,5);
        obj[b]=c;
      })
      // console.log(obj);
      lyric.value=obj;
      
      let ad=document.getElementById("toplay"); //歌词滚动
      ad.ontimeupdate=()=>{
        let time=transTime(ad.currentTime);
        // console.log(time,"123");
        if(time in lyric.value){
          rightTime.value=time;
          // console.log(rightTime.value);
        }
        lyrivMove();
      }
    }
    function lyrivMove(){
      let active=document.getElementsByClassName("active")[0];
      let index=$(".lrcbox").children().index(active);
      if(active){
        if(active.offsetTop>= offset.value){
                $(".lrcbox").css("transform", `translateY(-${index*50}px)`)
        }
      }
    }
    function transTime(time){
      let minute=Math.floor(time/60);
      minute<10 ? (minute="0"+minute) : minute;
      let second=Math.floor(time%60);
      second<10?(second="0"+second):second;
      return `${minute}:${second}`;
    }

// watch(rightTime,()=>{
//   let p=document.querySelector("p.active")
//   console.log([p]);
//   var a=document.getElementsByClassName("active")[0];
//   if(p.offsetTop>100){
//     a.scrollTop=p.offsetTop-100;
//   }
// })

</script>

<style lang="less" scoped>

 .img{
  width: 100%;
  height: 100%;
}
.title{
  text-align: center;
  line-height: 20px;

}
 .title p{
     color: #42b983;
     font-size: 15px;
 }

 .geci{
   position: relative;
   overflow: hidden; /* 隐藏滚动条 */
   transition: 0.5s;
 }
 .lrcbox{
   height: 400px;
   text-align: center;
   width: 100%;
   transition: 0.5s;
 }
 .lrcbox p{
   font-size: 20px;
   color: #8e09dc;
   height: 30px;


 }

.active{
  color: red !important;
  font-size: 30px !important;
}
</style>